<template>
    <!-- 筛选条件 -->
    <div class="gg-type" style="margin-bottom: 100px;">
      <div class="type-1">
        <div class="hong"></div>
        <div class="type-tit">筛选条件</div>
      </div>
      <div>
        <div class="type-2 type-z" v-if="type == 1">
          <div class="fz">分组：</div>
          <el-radio-group class="type1" style="height: 24px;" v-model="checkList6" v-for="item in quality">
            <el-radio-button style="height: 24px;" class="company" :label="item.id">{{ item.name }}</el-radio-button>
          </el-radio-group>
          <div class="bj" @click="edit()">编辑</div>
        </div>
        <div class="type-2 type-z" v-else>
          <div class="fz">分组：</div>
  
          <div v-for="(item, index) in quality" :key="index" class="xg">
            <div class="shanchu"><img src="../../../../assets/img/组 7460@2x.png" alt=""></div>
            <el-input @focus="focusInput" v-model="item.name" />
          </div>
          <!-- <input v-model="pick" v-bind:value="a"> -->
          <!-- <input type="text" v-model="checkList6" v-for="item in quality">{{ item.name }}</input> -->
          <!-- <el-radio-group class="type2"  style="height: 24px;" v-model="checkList6" v-for="item in quality">
              <div class="shanchu"><img src="../../../../assets/img/组 7461@2x.png" alt=""></div>
              <input type="text" v-model="checkList6">{{ item.name }}</input>
          </el-radio-group> -->
          <div class="xinz" @click="add"><img src="../../../../assets/img/组 7459@2x.png" alt=""></div>
          <div class="bj" @click="determine()">确定</div>
        </div>
      </div>
      <div class="type-2 type-z">
        <div class="fz" style="line-height: 36px;">企业：</div>
        <el-input class="qe-inp" style="width: 380px;" type="text" v-model="input1" />
      </div>
      <div style="margin-top: 30px;">
        <el-table :data="tableData" :header-cell-style="{ backgroundColor: '#ECF4FF', color: '#333333' }"
          :row-class-name="tableRowClassName" style="width: 100%">
          <el-table-column prop="" label="公司名称">
          </el-table-column>
          <el-table-column prop="name" label="最新项目">
          </el-table-column>
          <el-table-column prop="address" label="分组">
            <template #default="scope">
              <el-select v-model="scope.row.type" placeholder="请选择" v-if="scope.row.type == null"> 
      <el-option
        v-for="item in options"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      >
      </el-option>
    </el-select>
             <div v-else> {{types(scope.row.type)}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="更新时间">
          </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template #default="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
              <el-button @click="handleClick(scope.row)" type="text" size="small">确定</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      >
      </el-pagination>
      </div>
    </div>
  </template>
  <script setup>
  import { ref } from "vue";
  const type = ref(1)
  const checkList6 = ref()
  const input = ref()
  const input1 = ref()
  const currentPage4  =  ref(4)
  
  let quality = [
    {
      id: "2",
      name: "全部",
    },
    {
      id: "3",
      name: "竞争对手",
    },
    {
      id: "4",
      name: "合作伙伴",
    },
  ];
  const options= [
  {
      id: "2",
      name: "全部",
    },
    {
      id: "3",
      name: "竞争对手",
    },
    {
      id: "4",
      name: "合作伙伴",
    },
          ]
         const value= ref()
  const tableData = [{
    date: '2016-05-03',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1518 弄',
    type:1
  }, {
    date: '2016-05-02',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1518 弄',
    type:3
  }, {
    date: '2016-05-04',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1518 弄',
    type:2
  }, {
    date: '2016-05-01',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1518 弄',
    type:null,
  },]
  const edit = () => {
    type.value = 0
  }
  const determine = () => {
    type.value = 1
  }
  const focusInput = (e) => {
    console.log(e.target.value);
  }
  const tableRowClassName = ({ row, rowIndex }) => {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    }
  const add = () => {
    let a = {
      id: null,
      name: ""
    }
   
    tableRowClassName()
    quality.push(a)
  }
  const handleSizeChange =(val)=> {
          console.log(`每页 ${val} 条`)
        }
        const handleCurrentChange =(val)=> {
          console.log(`当前页: ${val}`)
        }
        const types = (even) =>{
          let a
          options.forEach(element => {
            if (element.id == even) {
            a = element.name
            }
  
          });
          return a
        }
        
  </script>
  <style lang="scss" scoped>
  .hong {
    width: 4px;
    height: 16px;
    background: #F43107;
    border-radius: 10px;
    margin-right: 6px;
  }
  
  .gg-type {
    // padding: 0 20px 0 0;
  }
  
  .type-1 {
    display: flex;
  
  }
  
  .type-2 {
    margin-top: 30px;
    display: flex;
    font-size: 16px;
    margin-left: 10px;
  
  }
  
  .xg {
    position: relative;
  }
  
  .fz {
    line-height: 28px;
  }
  
  .bj {
    background-color: #F43107;
    padding: 0 10px;
    color: #fff;
    border-radius: 4px;
    height: 28px;
    line-height: 28px;
    margin-left: 10px;
  }
  
  .type-tit {
    height: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 16px;
    color: #333333;
  }
  
  :deep(.el-input__inner) {
    width: fit-content;
  }
  
  .xg {
    // width: fit-content;
    margin-right: 10px;
    // width: 100px;
  }
  
  .shanchu {
    position: absolute;
    top: -10px;
    right: 0;
    width: 16px;
    height: 16px;
    z-index: 99;
  
    img {
      width: 100%;
      height: 100%;
    }
  }
  
  .xinz {
    width: 28px;
    height: 28px;
    margin-left: 10px;
  
    img {
      width: 100%;
      height: 100%;
    }
  }
  
  :deep(.el-input__wrapper) {
    height: 36px;
    background: #FFFFFF;
    border-radius: 4px;
  
  }
  
  :deep(.qe-inp .el-input__inner) {
    width: 380px !important;
  }
  
  :deep(.type1 .el-radio-button__inner) {
    font-size: 16px;
    height: 28px;
    padding: 5px 15px;
    background-color: transparent;
    border: none;
    border-left: none !important;
    margin-left: 10px;
  }
  
  :deep(.type2 .el-radio-button__inner) {
    font-size: 16px;
    height: 28px;
    padding: 5px 15px;
    margin-left: 10px;
    position: relative;
  }
  
  :deep(.type1 .is-active) {
    .el-radio-button__inner {
      background-color: #F43107;
      border: 1px solid #F43107;
    }
  
  }
  
  :deep(.el-radio-group :hover) {
    color: #F43107 !important;
  }
  
  :deep(.el-table__cell) {
    height: 44px;
  }
  
  /* 添加隔行变色的CSS */
  :deep(.el-table .el-table__body tr.el-table__row:nth-child(even)) {
    background-color: #EDF0F6;
  }
  
  :deep(el-table .el-table__body tr.el-table__row:nth-child(odd)) {
    background-color: #ffffff;
  }
  .el-pagination{
    margin-top: 28px;
  }
  </style>